<template>
  <div class="content">
    <div v-if="leftInfo" class="left" :style="{width: leftInfo.width}">
      <slot name="left-title"></slot>
      <Table 
        class="table" 
        :columns="leftInfo.columns" 
        :data="leftInfo.list"
        @on-selection-change='onSelectLeft'/>
    </div>
    <div class="center">
      <Button class='item' type="primary" :disabled="leftSelect.length == 0" @click='onMove(true)'>
        <Icon type="ios-arrow-forward" />
      </Button>
      <Button class='item' type="primary" :disabled="rightSelect.length == 0" @click='onMove(false)'>
        <Icon type="ios-arrow-back" />
      </Button>
    </div>
    <div v-if="rightInfo" class="right" :style="{width: rightInfo.width}">
      <slot name="right-title"></slot>
      <Table 
        class="table" 
        :columns="rightInfo.columns"
        :data="rightInfo.list"
        @on-selection-change='onSelectRight'/>
    </div>
  </div>
</template>


<script>
  export default {
    props:{
      leftInfo: Object,
      rightInfo: Object,
    },
    watch: {
      leftInfo: {
        handler(n) {
          this.leftSelect = []
        },
        deep: true
      },
      rightInfo: {
        handler(n) {
          this.rightSelect = []
        },
        deep: true
      }
    },
    data() {
      console.log('init')
      return {
        leftSelect: [],
        rightSelect: [],
      }
    },
    methods: {
      onMove(isLeft) {
        this.$emit('move', {
          isLeft,
          list: isLeft ? this.leftSelect : this.rightSelect
        })
        if (isLeft) {
          this.leftSelect = []
        } else {
          this.rightSelect = []
        }
      },
      onSelectLeft(list) {
        this.leftSelect = list
      },
      onSelectRight(list) {
        this.rightSelect = list
      },
      scrollToHighlight() {
        return new Promise((resolve, reject) => {
          this.$nextTick().then(() => {
            let elm = document.querySelector('.content .table .ivu-table-tbody .ivu-table-row-highlight')
            if (elm) {
              elm.scrollIntoView()
              resolve()
            } else {
              reject(new Error('未定位到新增位置'))
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 600px;
    position: relative;
    
    .left {
      height: 600px;
      border: 1px solid #e8eaec;
    }
    
    .center {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      
      .item {
        margin: 10px 20px;
      }
    }
    
    .right {
      height: 100%;
      border: 1px solid #e8eaec;
    }
    
    .table {
      height: 555px;
      // overflow-y: scroll;
    }
    
    ::v-deep .ivu-table {
      overflow-y: scroll;
    }
  }

  
</style>
